<template>
    <div class="container">
        <div class="demo">
            <div class="demo-title">Props</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>参数</td>
                        <td>说明</td>
                        <td>类型</td>
                        <td>默认值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>list</td>
                        <td>传入的数组，每项里面必须包含'title'属性进行显示</td>
                        <td>Array</td>
                        <td>[]</td>
                    </tr>
                </tbody>
            </table>
            <div class="demo-title">Events</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>事件</td>
                        <td>说明</td>
                        <td>回调参数</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>change</td>
                        <td>滑动结束后出发的事件</td>
                        <td>返回当前选中的index</td>
                    </tr>
                </tbody>
            </table>
            <div class="demo-title">传入的参数</div>
            <div class="demo-params">{{list}}</div>
            <div class="demo-title">选中的值</div>
            <div class="demo-params">{{index}}</div>
        </div>
        <brsSelect :list="list" @change="change"></brsSelect>
    </div>
</template>

<script>
import brsSelect from "@/components/select"
export default {
    name: 'select-index',
    data(){
        return {
            list: [ {title: '北京'}, {title: '上海'}, {title: '深圳'}, {title: '广州'} ],
            index: 0
        }
    },
    components: { brsSelect },
    methods: {
        change(index){
            console.log('change index', index)
            this.index = index
        }
    }
}
</script>

<style lang="less" scoped>
    .mouse-wheel-wrapper{
        width: 100%;
        height: 500px;
        overflow: hidden;
        background-color: #ffffff;
        .mouse-wheel-content{
            .mouse-wheel-item{
                width: 100%;
                height: 100px;
                display: flex;
                font-size: 20px;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>